<script>

$(document).ready(function(){

	// json otomattis nomor ktp
	$("#no_ktp").keyup(function(e){
		var val = $("#no_ktp").val();
		//alert(val);
		$.ajax({
			url : "<?=base_url();?>daftar_surat/penduduk_by_ktp/"+val,
			type: "GET",
			dataType: "json",
			success: function(data){
				$("#nama").val(data.nama);
				$("#j_kel").val(data.j_kel);
				$("#t_lahir").val(data.t_lahir);
				$("#tgl_lahir").val(data.tgl_lahir);
				$("#agama").val(data.agama);
				$("#pendidikan").val(data.pendidikan);
				$("#pekerjaan").val(data.pekerjaan);
				$("#s_nikah").val(data.s_nikah);
				$("#w_negara").val(data.w_negara);
				console.log(data);
			}
		});
	});

	// save
	saveData = function(){
		// get data anggota dari grid
		var str = $('#dg_anggota_keluarga').datagrid('getData');
		$('#anggota_keluarga').val(JSON.stringify(str));

		//console.log(str);
		//return 0;

		$('#form1').form('submit',{
			url: url,
			onSubmit: function(){ //unttuk confirmasi surat
				//$.messager.alert('Print','Print Surat');
				//$.messager.confirm('Cetak Surat','PDF NANTI DI SINI ',
			},
			success: function(result){
				console.log(result);
				// return 1;
				var result = eval('('+result+')');
				if (result.success){
					$('#dialog').dialog('close');		// close the dialog
					//print pdf
					// result.no_surat
					print_skp(result.no_surat);
				} else {
					$.messager.show({
						title: 'Error',
						msg: result.msg
					});
				}
			}
		});
	}

	// print
	print_skp = function(id){ // id calon siswa
		//alert('tada....');
		popupwindow('<?=base_url()?>daftar_surat/pdf_skp/'+id, 'Print Bukti Pendaftaran', 800, 500);
	}

	// grid
	/*---------------------------------------------------------------------------------------------------------*/
	/* untuk formater beserta dkk */
	set_nama = function(idx, value){
		//alert('index:'+index+' | val:'+value);
		$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'nama':value}});
	}
	for_nama = function(value, row, index){
		return '<input value="'+value+'" onchange="set_nama('+index+', this.value)" style="width: 100%;">';
	}

	set_jk = function(idx, value){
		//alert('index:'+index+' | val:'+value);
		$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'jk':value}});
	}
	for_jk = function(value, row, index){
		//return '<input value="'+value+'" onchange="set_jk('+index+', this.value)" style="width: 100%;">';
		var out = '';
		out += '<select onchange="set_jk('+index+', this.value)" style="width:100%">';
		out += '<option value="L" '+(value=="L"?'selected="selected"':'')+'>L</option>';
		out += '<option value="P" '+(value=="P"?'selected="selected"':'')+'>P</option>';
		out += '</select>';

		return out;
	}

	set_umur = function(idx, value){
		//alert('index:'+index+' | val:'+value);
		$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'umur':value}});
	}
	for_umur = function(value, row, index){
		return '<input value="'+value+'" onchange="set_umur('+index+', this.value)" style="width: 100%;">';
	}


	set_hubungan = function(idx, value){
		//alert('index:'+index+' | val:'+value);
		$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'hubungan':value}});
	}
	for_hubungan = function(value, row, index){
		return '<input value="'+value+'" onchange="set_hubungan('+index+', this.value)" style="width: 100%;">';
	}

	set_status = function(idx, value){
		//alert('index:'+index+' | val:'+value);
		$('#dg_anggota_keluarga').datagrid('updateRow',{index:idx, row:{'status':value}});
	}
	for_status = function(value, row, index){
		return '<input value="'+value+'" onchange="set_status('+index+', this.value)" style="width: 100%;">';
	}

	// init
	$('#dg_anggota_keluarga').datagrid({
		data:<?=$anggota_keluarga?>
	});

	//tombol bawah
	$(function(){
		var pager = $('#dg_anggota_keluarga').datagrid().datagrid('getPager');	// get the pager of datagrid
		pager.pagination({
			buttons:[
			{
				iconCls:'icon-add',
				text:'Tambah',
				handler:function(){
					$('#dg_anggota_keluarga').datagrid('appendRow',{
						//aksi:'',
						'nama':'',
						'jk':'L',
						'umur':'',
						'hubungan':'',
						'status':'',
					});
				}
			},
			{
				iconCls:'icon-remove',
				text:'Hapus',
				handler:function(){
					var row = $('#dg_anggota_keluarga').datagrid('getSelected');
					var index = $('#dg_anggota_keluarga').datagrid('getRowIndex', row);
					if(index == -1){
						alert('Pilih baris yang akan dihapus!');
					}else{
						$('#dg_anggota_keluarga').datagrid('deleteRow', index);
					}
				}
			}
			],
			layout:[],
			displayMsg:''
		});
	});


});
</script>
<form id="form1" method="post" style="margin:10px;">
	<input name="anggota_keluarga" id="anggota_keluarga" value="" type="hidden">
	<input name="nomer_surat" id="nomer_surat" value="<?=$nomer_surat?>" type="hidden">
	<div class="fitem" >
		<label style="width:120px">No. Surat</label>:
		<label style="width:150px"><?php echo $nomer_surat;?></label>
	</div>
	<div class="fitem">
		<label style="width:120px">No. KTP</label>:
		<input id="no_ktp" name="no_ktp" size="20" required="true" value="<?=set_value('no_ktp')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Nama Penduduk</label>:
		<input id="nama" name="nama" size="10" required="true" value="<?=set_value('nama')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Tempat Lahir</label>:
		<input id="t_lahir" name="t_lahir" size="20" required="true" value="<?=set_value('t_lahir')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Tanggal Lahir</label>:
		<input id="tgl_lahir" name="tgl_lahir" size="20" required="true" value="<?=set_value('tgl_lahir')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Warga Negara</label>:
		<input id="w_negara" name="w_negara" size="20" required="true" value="<?=set_value('w_negara')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Jenis Kelamin</label>:
		<input id="j_kel" name="j_kel" size="20" required="true" value="<?=set_value('j_kel')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Agama</label>:
		<input id="agama" name="agama" size="20" required="true" value="<?=set_value('agama')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Pendidikan</label>:
		<input id="pendidikan" name="pendidikan" size="20" required="true" value="<?=set_value('pendidikan')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Pekerjaan</label>:
		<input id="pekerjaan" name="pekerjaan" size="20" required="true" value="<?=set_value('pekerjaan')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Status Pernikahan</label>:
		<input id="s_nikah" name="s_nikah" size="20" required="true" value="<?=set_value('s_nikah')?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Alamat</label>:
		<input name="alamat" size="25" required="true" value="<?=$alamat?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Pindah Ke</label>:
		<input name="pindah_ke" size="20" required="true" value="<?=$pindah_ke?>">
	</div>
	<div class="fitem">
		<label style="width:120px">Alasan Pindah</label>:
		<input name="alasan" size="20" required="true" value="<?=$alasan?>">
	</div>
	<div class="fitem" >
		<label style="width:120px">Yang Tanda Tangan</label>:
		<select id="tanda_tangan" name="tanda_tangan">
			<?php echo $this->mdl_prosedur->option_ttd(); ?>	
		</select></li>
	</div>
	<div class="input_fields_wrap" >
		<label style="width:120px">Tambah Anggota keluarga </label>
		<table id="dg_anggota_keluarga" style="width:500px;height:200px"
				data-options="	rownumbers:true,
								singleSelect:true,
								autoRowHeight:true,
								pagination:true,
								pageSize:50,
								pageList:[10,20,30,40,50,100,150,200],
								fit:false
							">
			<thead>
				<tr>
					<th field="nama" formatter="for_nama" sortable="false" width="100">Nama</th>
					<th field="jk" formatter="for_jk" sortable="false" width="50">JK</th>
					<th field="umur" formatter="for_umur" sortable="false" width="50">Umur</th>
					<th field="hubungan" formatter="for_hubungan" sortable="false" width="100">Hubungan</th>
					<th field="status" formatter="for_status" sortable="false" width="118">Status</th>
				</tr>
			</thead>
		</table>
	</div>
</form>
	

